<template>
	<view class="container">

		<view class="topBox bgWrite">
			<view>
				<image :src="imgUrl(info?.cover[0]?.url)" style="width: 190rpx; height: 190rpx; border-radius: 20rpx;">
				</image>
			</view>
			<view class="schoolBox">
				<view>
					<view class="title01">{{info?.title}}</view>
					<view class="txtNumber">{{info?.attr?.filter(item=>attr_id==item.id)?.[0]?.name}}</view>
				</view>
				<view class="txtPrice">&yen;{{info?.price}}</view>
			</view>

		</view>
		<view class="bgWrite">
			<view class="title02">预约信息</view>
			<view class="orderForm">
				<uv-form labelPosition="left" ref="form1">
					<uv-form-item borderBottom ref="item1" customStyle="padding:30rpx 0 30rpx;">
						<view style="	display: flex;">
							<view class="momo">姓名</view>
							<uv-input v-model="name" border="none" placeholder="请输入" 	placeholderClass="color:'#B0B9C3'"></uv-input>
						</view>

					</uv-form-item>
					<uv-form-item borderBottom ref="item1" customStyle="padding:30rpx 0 30rpx;">
						<view style="display: flex;">
							<view class="momo">手机号</view> 
									<uv-input v-model="phone" border="none" placeholder="请输入" 
									placeholderClass="color:'#B0B9C3'"></uv-input>
						</view>
		
					</uv-form-item>
					<uv-form-item borderBottom ref="item1" v-if="info?.is_buy=='1'"
						customStyle="padding:30rpx 0 30rpx;">
						<view style="display: flex;">
							<view class="momo">数量</view>
									<view style="font-weight: 500;
font-size: 26rpx;
color: #000000;margin-top:10rpx;
">1</view>
						</view>
					</uv-form-item>
					<uv-form-item borderBottom ref="item1" customStyle="padding:30rpx 0 30rpx;">
						<view style="	display: flex;">
							<view class="momo">身份证号</view>
								<uv-input v-model="remark" border="none" placeholder="请输入" 
									placeholderClass="color:'#B0B9C3'" maxlength="18"></uv-input>
						</view>
					</uv-form-item>
					<uv-form-item  ref="item1" customStyle="padding:30rpx 0 30rpx;">
						<view style="display: flex;">
							<view class="momo">备注</view> 
									<uv-input v-model="memo" border="none" placeholder="请输入备注" 
									placeholderClass="color:'#B0B9C3'"></uv-input>
						</view>
							
					</uv-form-item>
				</uv-form>

			</view>

		</view>
		<view class="btnBox">
			<button style="margin-top: 50px; color: #fff;
			 width: 550rpx;
			 height: 90rpx;
			 line-height:90rpx;
			 background: #31C0ED;
			 border-radius: 12rpx 12rpx 12rpx 12rpx;font-size: 30rpx; background:rgba(49, 192, 237, 1)" @click="submit"
				v-if="info?.is_buy=='1'">微信支付</button>
			<button style="margin-top: 50px; color: #fff; font-size: 30rpx; background:rgba(49, 192, 237, 1)"
				@click="submit" v-if="info?.is_buy=='0'">预约</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import route from '@/utils/route';
	import { toast, imgUrl } from '@/utils/fun';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { http, apiPath } from '@/common/http/index';

	onLoad((e : any) => {
		console.log('eeeeeeeeeeee', e)
		product_id.value = e.product_id
		attr_id.value = e.attr_id
		name.value = e.name;
		phone.value = e.phone;
		remark.value = e.remark;
		memo.value= e.memo;
		get_info()
	});
	const get_info = async () => {
		const params = {
			id: product_id.value
		}
		info.value = (await http.get('/api/v1/product/details', { params })).data;
		console.log(info.value)
	};

	const [info, product_id, attr_id, name, phone, remark, loading,memo] = [ref(), ref(), ref(), ref(), ref(), ref(), ref(), ref()]

	const submit = () => {
	
		if (!name.value) return toast('请输入姓名');
		if (!phone.value) return toast('请输入手机号');
		if (!remark.value) return toast('请输入身份证号');
		loading.value = true;
		const params = {
			product_id: product_id.value,
			attr_id: attr_id.value,
			name: name.value,
			phone: phone.value,
			remark: remark.value,
			user_remark:memo.value,
		};
		http
			.post(`/api/v1/order`, params, { custom: { loading: true } })
			.then((res : any) => {
				if (res.data.type == 1) {
					paymini(res)
				} else {
					totast('预约成功')
				}
			})
			.catch((err) => {
				console.log("1111",err)
				if(err.message=='请先维护个人信息'){
					uni.redirectTo({ 
						url: '/pages/mine/setting?name='+name.value+'&phone='+
									 phone.value+'&remark='+remark.value+'&product_id='+product_id.value+
									 '&attr_id='+attr_id.value})
				}
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	};
	// 小程序支付
	const paymini = (resX) => {
		const params = {
			order_no: resX.data.order_no
		};
		http.post(`/api/v1/order/pay`, params, { custom: { loading: true } })
			.then(res => {
				setTimeout(() => {
					loading.value = false
				}, 1500)
				console.log("支付进来了吗", resX)
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: String(res.data.timeStamp),
					nonceStr: res.data.nonceStr,
					package: res.data.package,
					signType: res.data.signType,
					paySign: res.data.paySign,
					success: res => {
						uni.redirectTo({ url: '/pages/lesson/paySuccess' })
					},
					fail(e) {
						console.log(e);
					}
				})

			})
			.catch(err => {
				console.log(err);
			})
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
		height: 100%;
	}
  .momo{
	  display: flex;
	  font-weight: 500;
	  font-size: 26rpx;margin-top:6rpx;
	  color: #828D98;width:150rpx
  }
	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.orderForm {
		padding: 0 20rpx;
	}

	::v-deep .orderForm .uv-form-item__body__left__content__label {
		font-size: 26rpx;
		color: #000;
	}

	.bgWrite {
		background: #fff;
		padding: 30rpx 20rpx;
		border-radius: 20rpx;
	}

	.topBox {
		display: flex;
		margin-bottom: 30rpx;
	}

	.schoolBox {
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.title01 {
		font-weight: bold;
		color: #030303;
		margin-bottom: 10rpx;
		font-size: 30rpx;
	}

	.title02 {
		margin-bottom: 20rpx;
		font-size: 30rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #000000;
		padding: 0 20rpx;
	}

	.txtPrice {
		font-weight: bold;
		font-size: 28rpx;
		/* font-weight: 700; */
		letter-spacing: 0px;
		line-height: 18px;
		color: rgba(49, 192, 237, 1);
	}

	.txtNumber {
		font-weight: 500;
		font-size: 26rpx;
		color: #999999;
		/* font-weight: 500; */
	}

	.btnBox {
		position: fixed;
		bottom: 8%;
		left: 0;
		right: 0;
	}
</style>